<template>
  <div class="notice-dialog">
    <el-dialog
      :title="titleFlag ? '修改角色' : '添加角色'"
      :visible.sync="show"
      :before-close="close"
    >
      <el-form :model="addForm" ref="addForm" label-width="80px">
        <el-form-item label="分组:">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色:">
          <div class="role" v-for="item in menuList" :key="item.id">
            <el-checkbox
              :value="!!item.checked"
              @change="CheckAllChange($event, item)"
              >{{ item.name }}</el-checkbox
            >
            <el-checkbox-group
              v-model="checkSubArr"
              @change="CheckSubChange($event, item)"
            >
              <el-checkbox
                v-for="Sub in item.children"
                :label="Sub.id"
                :key="Sub.id"
                >{{ Sub.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addNotice">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import http from "../../api/administratorrole";
export default {
  props: {
    // 标头
    titleFlag: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: false,
    },
    //父组件传过来值
    updateData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 公告信息
      checkSubArr: [], //选择权限id
      menuList: [],
      addForm: {
        id: 0,
        name: "",
        menus: [
          {
            id: 2,
          },
          {
            id: 3,
          },
        ],
      },
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    CheckAllChange(bool, data) {
      console.log("all", bool, data);
      let subArr = data.children.map((item) => item.id);
      data.checked = bool;
      if (bool) {
        if (data.children) {
          this.checkSubArr = [...new Set(this.checkSubArr.concat(subArr))];
        }
      } else {
        this.checkSubArr = this.checkSubArr.filter(
          (item) => !subArr.includes(item)
        );
      }
    },
    CheckSubChange(arr, data) {
      console.log("sub=", arr, data);
      data.checked =
        data.children.filter((item) => arr.includes(item.id)).length === data.children.length;
    },
    async getRoleList() {
      const res = await http.getMenuList({ roleid: 0 });
      this.menuList = res.data.list;
      console.log(res);
    },
    // 取消
    close() {
      this.$emit("close", false); //子元素像父元素传值
    },
    // 确定
    async addNotice() {
      this.addForm.menus = this.checkSubArr.map((item) => {
        return { id: item };
      });
      let msg = !this.addForm.id ? "添加成功" : "修改成功";
      const { errCode } = await http.addAdministrator(this.addForm);
      if (errCode === 10000) {
        this.$message.success(msg); //成功失败特性
        this.$emit("close", false, undefined, 1); //关闭窗口
        this.$refs.addForm.resetFields(); //重置input
      }
    },
  },
  watch: {
    async updateData(newVal) {
      if (newVal) {
        this.addForm = newVal;
        //根据当前编辑行的id，更新模块权限列表
        await this.getRoleList();
        //存放已经选择的模块
        let list = [];
        this.menuList.forEach((item) => {
          let arr = item.children.map((val) => {
            if (item.checked) return val.id;
          });
          //push 已选项list
          arr.forEach((id) => id && list);
        });
        this.checkSubArr = list;
      }
    },
  },
};
</script>


<style lang="less">
.role {
  padding-top: 8px;
  .el-checkbox-group {
    padding: 8px 15px 0;
  }
}
</style>